<template>
    <div style="height: 100%">
        <div v-if="!textAndIndex.richText || textAndIndex.richText.trim() === ''" class="empty-placeholder">
            点击进行编辑
        </div>
        <div class="ql-editor" v-html="textAndIndex && textAndIndex.richText"></div>
        <el-dialog
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                @click.prevent.stop=""
        >
            <quill
                    v-model="editorValue"
                    :options="editorOption"
            />
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {quillEditor} from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    export default {
        name: "EditableRichText",
        props: {
            readonly: {
                type: Boolean,
                default: () => false,
            },
            textAndIndex: {
                type: Object,
                default: () => undefined,
            },
        },
        data() {
            return {
                val: undefined,
                editorValue: '',
                dialogVisible: false,

                editorOption: {
                    placeholder: "请输入内容",
                },
            };
        },
        components: {
            "quill": quillEditor,
        },
        methods: {
            edit() {
                if (this.readonly) {
                    return;
                }
                const {richText} = this.textAndIndex;
                this.editorValue = richText;
                this.dialogVisible = true;
            },
            handleClose() {
                const {richText, index} = this.textAndIndex;
                this.$emit('changed', {
                    index,
                    richText,
                });
                this.closeDialog();
            },
            handleConfirm() {
                const {index} = this.textAndIndex;
                this.$emit('changed', {
                    index,
                    richText: this.editorValue,
                });
                this.closeDialog();
            },
            closeDialog() {
                this.dialogVisible = false;
            }
        }
    }
</script>

<style scoped>
    .empty-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-family: Helvetica, Arial, sans-serif;
        color: rgba(255, 255, 255, 0.6);
        font-size: 2em;
        height: 100%;
    }
</style>